<template>
	<xn-form-container
		:title="title"
		:width="1500"
		:visible="visible"
		:destroy-on-close="true"
		@close="onClose"
		:bodyStylePadding="1"
	>
		<div>
			<fm-making-form ref="makingFormRef" style="height: 700px" preview generate-code generate-json></fm-making-form>
		</div>
		<template #footer>
			<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
			<a-button type="primary" :submitLoading="submitLoading" @click="onSubmit">保存</a-button>
		</template>
	</xn-form-container>
</template>
<script>
	import { cloneDeep } from 'lodash-es'
	import sysFromConfigApi from '@/api/flow/sysFromConfigApi'
	export default {
		name: 'DesignForm',
		components: {},
		data() {
			return {
				visible: false,
				title: '',
				submitLoading: false,
				formData: null
			}
		},
		methods: {
			onOpen(record) {
				this.visible = true
				if (record) {
					this.title = record.formTitle
					this.formData = cloneDeep(record)
					if (record.formJson) {
						this.$nextTick(() => {
							if (this.$refs.makingFormRef) {
								let dataJson = JSON.parse(record.formJson)
								this.$refs.makingFormRef.setJSON(dataJson)
							}
						})
					}
				}
			},
			onSubmit() {
				this.submitLoading = true
				console.log(this.$refs.makingFormRef.getJSON())
				this.formData.formJson = JSON.stringify(this.$refs.makingFormRef.getJSON())
				sysFromConfigApi
					.sysFromConfigSubmitForm(this.formData, this.formData.id)
					.then(() => {
						this.onClose()
						this.$emit('successful')
					})
					.finally(() => {
						this.submitLoading = false
					})
			},
			onClose() {
				this.visible = false
			}
		}
	}
</script>
<style scoped>
	.el-container {
		height: 800px !important;
	}
</style>
